<template>
  <div class="wh-flow-info-wraper">
    <div class="wh-flow-info-content">
      <!-- <el-button class="wh-flow-info-content-btn" size="small" type="primary" @click="onSave">暂存</el-button> -->
      <el-form ref="infoForm" label-position="top" :rules="rules" :model="infoForm">
        <el-form-item label="图标" required prop="processIcon">
          <el-popover
            placement="bottom-start"
            width="460"
            trigger="click"
            @show="onShow"
          >
            <wh-icon-select ref="iconSelect" @selected="selectedIcon" :active-icon="infoForm.processIcon" />
            <el-input slot="reference" :disabled="disabled" v-model="infoForm.processIcon" placeholder="点击选择图标" readonly>
              <wh-svg-icon
                v-if="infoForm.processIcon"
                slot="prefix"
                :icon-class="infoForm.processIcon"
                style="width: 25px; height: 16px;"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="名称" required prop="processName">
          <el-input :disabled="disabled" maxlength="15" show-word-limit v-model="infoForm.processName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input :disabled="disabled" maxlength="30" show-word-limit v-model="infoForm.remark" placeholder="请输入说明"></el-input>
        </el-form-item>
        <el-form-item label="流程状态" prop="processState">
          <el-radio-group :disabled="disabled" v-model="infoForm.processState">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分组" required prop="processType">
          <el-cascader
            style="width: 100%;"
            placeholder="请选择分组"
            :disabled="disabled"
            v-model="infoForm.processType"
            :options="typeData"
            :show-all-levels="false"
            :props="{label: 'name', value: 'id'}"></el-cascader>
        </el-form-item>
      </el-form>
      <!-- <div class="wh-flow-info-content-next">
        <el-button type="primary" round @click="onClickNext">下一步</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import whIconSelect from '../wh-flow-icon/index.vue'
import whSvgIcon from '../../packages/wh-svg-icon'
import { flwProcessType } from '../../network/api.js'
export default {
  components: {
    whIconSelect,
    whSvgIcon
  },
  data() {
    return {
      infoForm: {
        processIcon: '',
        processName: '',
        remark: '',
        processState: "1",
        processType: [],
      },
      rules: {
        processIcon: [
          { required: true, message: '请选择图标', trigger: 'blur' }
        ],
        processName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        processType: [
          { required: true, message: '请选择分组', trigger: ['change', 'blur'] }
        ],
        processState: [
          { required: true, message: '请选择流程状态', trigger: ['change', 'blur'] }
        ]
      },
      typeData: [],
      selectVisible: false
    }
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    baseUrl: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.infoForm = newValue
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initTypeData()
  },
  methods: {
    onShow () {
      this.$refs['iconSelect'].reset()
    },
    initTypeData () {
      flwProcessType(this.baseUrl, this.headers, {}).then(res => {
        if (res.code === 200) {
          this.typeData = this.removeEmptyChildren(res.data)
        }
      })
    },
    removeEmptyChildren (node) {
      node.forEach(item => {
        if (item.children && item.children.length === 0) {
          delete item.children
        } else if (item.children && item.children.length) {
          this.removeEmptyChildren(item.children)
        }
      })
      return node
    },
    onClickNext () {
      this.$emit('input', this.infoForm)
      this.$emit('on-next')
      // this.$refs.infoForm.validate((vaild) => {
      //   if (vaild) {

      //   } else {
      //     return false
      //   }
      // })
    },
    selectedIcon(name) {
      this.infoForm.processIcon = name;
    },
    onSave () {
      this.$refs.infoForm.validate((vaild) => {
        if (vaild) {
          this.$emit('input', this.infoForm)
          this.$emit('on-save')
        } else {
          return false
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
  .wh-flow-info-wraper {
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    background: #F2F3F4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: left;
    .wh-flow-info-content {
      width: 100%;
      max-width: 1000px;
      background: #FFFFFF;
      padding: 20px 20%;
      box-sizing: border-box;
      position: relative;
      &-btn {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      &-next {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
